.root
  .nav
    a.dot
      color #8a949c
      &.filled
      &.active
        color #3e98df

.root
  .nav
    .dot[data-role="link"]
      > span
        margin-left 49px
        margin-top -4px

.dot 
  position relative
  span
    margin-left  49px
    &::before
      content ''
      height 38px
      position absolute
      width 1px 
      left 26px
      background #F0F0F0
      top 32px
  &::before
    content ''
    width 6px
    height 6px
    border-radius 6px
    background-color #C8D0E1
    position absolute
    left  24px
    top 20px
    z-index 1

.dot.active
  &::before
    background #4583CB
  &::after
    content ''
    width 12px
    height 12px
    border-radius 12px
    background-color #fff
    border 1px solid #4583CB
    position absolute
    left  21px
    top 17px
    z-index 0
    box-shadow 0px 0px 1px 4px rgb(255, 255, 255)

.dot.filled
  color #3e98df
  &::before
    background-color #4583CB
  span
    &::before
      background #4583CB

.dot.last
  span
    &::before
      display none

.next
  width 188px
  height 40px
  margin-top 50px
  font-size 14px
